<template>
	<view class="popup-menu-box">

		<view class="popup-menu">
			<view class="triangle_border_up"></view>
			<view class="menu-item line-container line-split">
				<image class="menu-img" src="../../static/home/kefu.png"></image>
				<view class="menu-text">在线客服</view>
			</view>
			<view class="line-split"></view>
			<view class="menu-item line-container">
				<image class="menu-img" src="../../static/home/order.png"></image>
				<view class="menu-text">全部订单</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.popup-menu-box {
		position: absolute;
		top: 0;

		.popup-menu {
			background: gray;
			border-radius: 20upx;
			padding: 0 30upx;
			box-sizing: border-box;
			width: 220upx;
			height: 120upx;
			position: relative;

			.triangle_border_up {
				position: absolute;
				top: 0;
				right: 0;
				width: 10;
				height: 10;
				border-width: 10upx;
				border-style: solid;
				border-color: transparent transparent red transparent;
			}

			.menu-item {
				height: 60upx;
				box-sizing: border-box;

				&.line-container {
					justify-content: start;
				}

				&.line-split {
					border-bottom: 2upx solid red;
				}

				.menu-img {
					width: 40upx;
					height: 40upx;
				}

				.menu-text {
					float: left;
					font-size: 20upx;
					font-weight: bold;
					color: rgba(23, 23, 23, 1);
					padding-left: 16upx;
				}
			}
		}
	}
</style>
